<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>微课</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
    <style>
        body {}
        .blank{
            display: block;
            height:250px;
            background-color: #fff;
        }
        #page1, #page2, #page3{
            position: relative; z-index:1000;
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            -webkit-transition: all .4s;
            transition: all .4s;
            background-color: #fff;
        }
        #page1.out, #page2.out, #page3.out{
            display:none;
        }
        .summary{
            text-indent: 10px;
        }
        .teacher-class{
            position:relative;
            display: block;
        }
        .teacher-class>span{
            display: block;
            width:180px;
            margin:0 auto;
            margin-top:20px;
            text-align:center;
            font-weight: bold;
            font-size:32px;
            border-bottom:1px solid #CCCCCC;
        }
        .join{
            border:none !important;
            height:80px;
        }
        .aui-list{
            border-top:none;
        }
        .aui-list .aui-list-item:active {
            background-color:#fff;
        }
        .submit-button{
            padding:0 20px;
            margin-bottom:20px;
        }
        .yellow{
            color: #FAA732;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div class="aui-card-list-content">
        <img id="img" src="" />
    </div>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item">教师简介</div>
        <div class="aui-tab-item aui-active">课程简介</div>
        <div class="aui-tab-item">试题</div>
    </div>
    <div id="page1" class="d_page out">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item noborder">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media">
                        <img id="avatar" src="">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div id="name" class="aui-list-item-title"></div>
                            <div class="aui-list-item-right">
                                <div id="follow" tapmode class="aui-btn aui-btn-info" onclick="follow();">关注</div>
                            </div>
                        </div>
                            </br>
                        <div id="title" class="aui-list-item-text">
                        </div>
                    </div>
                </div>
                <div id="description" class="aui-card-list-content-padded aui-padded-t-0 aui-padded-b-0 summary" style="color:#7b7b7b;">
                </div>
            </li>
        </ul>
        <div id="myclass">
            <div class="teacher-class"><span>所管班级</span></div>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-list-in">
                    <li class="aui-list-item join noborder">
                        <div class="aui-list-item-inner">
                            <div id="class" class="aui-list-item-title"></div>
                            <div class="aui-list-item-right">
                                <div id="addclass" tapmode class="aui-btn aui-btn-info" onclick="addClass();" >加入班级</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="page2" class="d_page">
        <div class="aui-card-list-header aui-padded-t-5 aui-padded-b-5">
            <span>课程简介</span><i id="star" class="aui-iconfont aui-icon-star" tapmode onclick="collect();"></i>
        </div>
        <div id="summary" class="aui-card-list-content-padded aui-padded-t-0 aui-padded-b-0 summary" style="color:#7b7b7b;">
        </div>
        <div class="aui-card-list-footer aui-font-size-12" style="color:#999;">
            <div>
                <span id="subject"></span> - <span id="chapter"></span> - <span id="section"></span>
            </div>
        </div>
    </div>
    <div id="page3" class="d_page out">
        <div id="paper" class="aui-content aui-margin-b-15">
        
        </div>
    </div>
    <div class="submit-button">
        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="learn();">学习课程</div></p>    
    </div>
    <script id="test_judge" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">判断题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                        {{=it[i].title}}
                        </div>
                        <div class="aui-list-item-input judge">
                            <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> 是</label>
                            <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> 否</label>
                        </div>
                    </div>
                </li>
                {{ }else{ }}
                <div class="aui-card-list">
                    <div class="aui-card-list-content">
                        <img src={{=baseurl+it[i].title}} />
                    </div>
                    <div class="aui-card-list-footer">
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> 是</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> 否</label>
                    </div>
                </div>
                {{ } }}
            {{ } }}
        </ul>
    </script>
    <script id="test_choice" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">选择题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                            {{=it[i].title}}
                            </div>
                        </div>
                    </li>
                {{ }else{ }}
                    <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                        <div class="aui-card-list-content">
                            <img src={{=baseurl+it[i].title}} />
                        </div>
                    </div>
                {{ } }}
                {{ if(it[i].type_choice=="1") { }}
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} checked value="1">{{=it[i].choice[0]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="2">{{=it[i].choice[1]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="3">{{=it[i].choice[2]}}</label>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-right">
                                <label><input type="radio" class="aui-radio" name={{=it[i].id}} value="4">{{=it[i].choice[3]}}</label>
                            </div>
                        </div>
                    </li>
                {{ }else{ }}
                    <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                        <div class="aui-row aui-row-padded">
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[0]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[1]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[2]}} />
                            </div>
                            <div class="aui-col-xs-4">
                                <img src={{=baseurl+it[i].choice[3]}} />
                            </div>
                        </div>
                    </div>
                    <div class="aui-card-list-footer">
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} checked value="1"> A</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="2"> B</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="3"> C</label>
                        <label><input class="aui-radio" type="radio" name={{=it[i].id}} value="4"> D</label>
                    </div>
                {{ } }}
            {{ } }}
        </ul>
    </script>
    <script id="test_question" type="text/x-dot-template">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header">简答题</li>
            {{ for(var i = 0;i<it.length;i++){ }}
                {{ if(it[i].type=="1"){ }}
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            {{=it[i].title}}
                        </div>
                    </div>
                </li>
                {{ }else{ }}
                <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                     <div class="aui-card-list-content">
                        <img src={{=baseurl+it[i].title}} />
                    </div>
                </div>
                {{ } }}
                <div id={{=it[i].id}}>
                    <div class="aui-card-list-footer">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-input">
                                <textarea placeholder="请输入答案"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="aui-card-list-footer">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                <div class="aui-btn aui-btn-info aui-margin-r-5" tapmode onclick="choosePicture({{=it[i].id}})">上传图片</div>
                            </div>
                            <div class="aui-list-item-input">
                                <img />
                            </div>
                        </div>
                    </div>
                </div>
            {{ } }}
        </ul>
    </script>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
    var data;
    var index = 2;
    var start_time;
    var token;
    var isfan = false;
    var hasjoin = false;
    var flag_collected;
    apiready = function(){
        require(["zepto","common","aui2/aui-tab"],function(){
            data = api.pageParam.data;
            
            flag_collected = data.course.has_collected;
            if(flag_collected){
                $("#star").addClass('yellow');
            }
            
            baseurl = $zb.getRes("/");
            
            $zb.prefs.getPrefs('token',function(ret){
                token = ret.value;
            })
            
            $("#img").attr('src',api.pageParam.img);
            
            $("#summary").html(data.course.summary);
            $("#subject").html(data.course.subject);
            $("#chapter").html(data.course.chapter);
            $("#section").html(data.course.section);
            
            if(data.teacher.is_fan){
                isfan = true;
                $("#follow").html('取消关注');
            }
            if(data.teacher.has_join_class){
                hasjoin =true;
                $("#addclass").html('退出班级');
            }
            
            $("#avatar").attr('src','http://'+$zb.host+"/upload/"+data.teacher.avatar);
            $("#name").html(data.teacher.name);
            $("#title").html(data.teacher.title);
            if(data.teacher.class){
                $("#class").html(data.teacher.class);
            }else{
                $("#myclass").addClass('hidden');
            }
            $("#description").html(data.teacher.description);
            
            $("#paper").html("");
            $("#paper").append(doT.template($("#test_judge").text())(data.test.judgement));
            $("#paper").append(doT.template($("#test_choice").text())(data.test.choice));
            $("#paper").append(doT.template($("#test_question").text())(data.test.question));
            
            var tab = new auiTab({
                element:document.getElementById("tab"),
                index:2
            },function(ret){
                var temp_index = index;
                index = ret.index;
                switchBtn(temp_index,index);
            }); 
            
            start_time = getCurrentTime();
        })
    };
    function switchBtn(temp_index,c_index){
        $("#page"+c_index).removeClass('out');
        $("#page"+temp_index).addClass('out');
    }
    
    function openPicture(src_array,c_index){
        api.openWin({
            name: 'rs_test_picture',
            url: './rs_test_picture.html',
            pageParam:{
                src_array : src_array,
                index : c_index,
            },
            bgColor:'#000'
        });
    }
    
    function choosePicture(id){
        api.actionSheet({
            cancelTitle: '取消',
            buttons: ['选择图片', '拍照']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index==1){
                getPicture("library",id);
            }else if(index==2){
                getPicture("camera",id);
            }
        });
    }
    
    function getPicture(type,id){
        api.getPicture({
            sourceType: type,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 100,
            saveToPhotoAlbum: false
        }, function(ret, err) {
            if (ret) {
                $("#"+id).find('img').attr("src",ret.data);
            }
        });
    }
    
    function getCurrentTime(){
        var c_time = new Date();
        var yy = c_time.getFullYear();
        var MM = c_time.getMonth() + 1;
        var dd = c_time.getDate();
        var HH = c_time.getHours();
        var mm = c_time.getMinutes();
        var ss = c_time.getSeconds();
        MM = MM<10?("0"+MM):MM;
        dd = dd<10?("0"+dd):dd;
        HH = HH<10?("0"+HH):HH;
        mm = mm<10?("0"+mm):mm;
        ss = ss<10?("0"+ss):ss;
        return yy+"-"+MM+"-"+dd+" "+HH+":"+mm+":"+ss;
    }
    
    function learn(){
        api.openFrame({
            name: 'rs_live',
            url: './rs_live.html',
            rect: {
                x:0,
                y:0,
                w:api.pageParam.headerPos.w,
                h:'auto',
                marginTop:api.pageParam.headerPos.h
            },
            pageParam:api.pageParam,
            slidBackEnabled:false
        });
    }
    
    function follow(){
        var s_data = {
            values:{
                token : token,
                teacher_id : data.teacher.id
            }
        }
        if(isfan){
            $zb.requestForData(s_data,'fans','unfollow',function(ret){
                if(ret.status=="OK"){
                    isfan = false;
                    $("#follow").html("关注");
                    api.toast({
                        msg:'已取消关注'
                    });
                }
            })
        }else{
            $zb.requestForData(s_data,'fans','follow',function(ret){
                if(ret.status=="OK"){
                    isfan = true;
                    $("#follow").html("取消关注");
                    api.toast({
                        msg:'关注成功'
                    });
                }
            })
        }
    }
    
    function addClass(){
        var jpush = api.require('ajpush');
        var s_data = {
            values:{
                token : token,
                class_id : data.teacher.class_id
            }
        }
        if(hasjoin){
            $zb.requestForData(s_data,'classes','quitClass',function(ret1){
                if(ret1.status=="OK"){
                    hasjoin = false;
                    $("#addclass").html("加入班级");
                    api.toast({
                        msg:'已退出班级'
                    });
                    $zb.prefs.getPrefs('userInfo',function(ret){
                        if(ret.value){
                            var param = {};
                            param.alias = JSON.parse(ret.value).push_id;
                            param.tags = ret1.data.tags;
                            jpush.bindAliasAndTags(param, function(ret) {
                            });
                        }
                    })
                }
            })
        }else{
            $zb.requestForData(s_data,'classes','joinClass',function(ret1){
                if(ret1.status=="OK"){
                    hasjoin = true;
                    $("#addclass").html("退出班级");
                    api.toast({
                        msg:'加入班级成功'
                    });
                    $zb.prefs.getPrefs('userInfo',function(ret){
                        if(ret.value){
                            var param = {};
                            param.alias = JSON.parse(ret.value).push_id;
                            param.tags = ret1.data.tags;
                            jpush.bindAliasAndTags(param, function(ret) {
                            });
                        }
                    })
                }
            })
        }
    } 
    
    function collect(){
        var s_data = {
            values:{
                token : token,
                course_id : data.course.id
            }
        }
        if(flag_collected){
            $zb.requestForData(s_data,'collection','deleteCollection',function(ret){
                if(ret.status=="OK"){
                    $("#star").removeClass('yellow');
                    api.toast({
                        msg:'取消收藏'
                    });
                    flag_collected = false;
                }
            });
        }else{
            $zb.requestForData(s_data,'collection','createCollection',function(ret){
                if(ret.status=="OK"){
                    $("#star").addClass('yellow');
                    api.toast({
                        msg:'已收藏'
                    });
                    flag_collected = true;
                }
            });
        }
    }
</script>
</html>